<template>
	<view class="companyProject">
		<view :style="tabberStyle"
			class="companyProject-search ff-bg-blue ff-padding-left-15 ff-padding-right-15 ff-padding-top-12 ff-padding-bottom-12">
			<u-search v-model="params.keyword" input-align="center" @change="projectNameChange" bg-color="#FFFFFF"
				:height="72" :show-action="false" :clearabled="true" placeholder="请输入要搜索的项目名称"></u-search>
		</view>
		<!-- 列表数据 -->
		<view>
			<view v-if="companyList.length > 0" class="companyProject-content">
				<view class="companyProject-content-box ff-margin-bottom-10 ff-border-radius-10 ff-bg-fff"
					v-for="(item, index) of companyList" :key="index" @click="companyClick(item)">
					<view class="ff-font-16 ff-color-333 ff-font-weight-600 ff-ellipsis-1 ff-line-height-1-2">
						{{ item.projectName }}
					</view>
					<view v-if="item.rescissionStatus == 1 && item.rescissionPromoterStatus == 2"
						class="rescindTips ff-padding-7 ff-border-radius-5 ff-color-fff ff-font-12 ff-line-height-1-5 ff-margin-top-9 ff-margin-bottom-5">
						请注意，服务机构已对本项目发起解约申请，点击进入项目详情查看与处理。如有异议，请尽快与服务机构联系。
					</view>
					<view class="ff-align-items-one ff-flex-wrap">
						<view class="ff-margin-right-10">
							<view v-if="item.status == 0" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已发布</view>
							<view v-if="item.status == 1" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已响应</view>
							<view v-if="item.status == 2" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已确认</view>
							<view v-if="item.status == 3" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;进行中</view>
							<view v-if="item.status == 4" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已结束</view>
							<view v-if="item.status == 5" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;待批准</view>
							<view v-if="item.status == 6" class="tips5 ff-font-12">项目状态&nbsp;|&nbsp;已解约</view>
						</view>
						<view v-if="item.status == 3" class="ff-margin-right-10">
							<view v-if="item.maintenances[0].status == 0" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;待维保
							</view>
							<view v-if="item.maintenances[0].status == 1" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;维保中
							</view>
							<view v-if="item.maintenances[0].status == 2" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;待审核
							</view>
							<view v-if="item.maintenances[0].status == 3" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;待签发
							</view>
							<view v-if="item.maintenances[0].status == 5" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;已完成
							</view>
							<view v-if="item.maintenances[0].status == 6" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;已驳回
							</view>
							<view v-if="item.maintenances[0].status == 7" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;待指派
							</view>
							<view v-if="item.maintenances[0].status == 8" class="tips2 ff-font-12">维保状态&nbsp;|&nbsp;待提交
							</view>
							<view v-if="item.maintenances[0].status == 9" class="tips5 ff-font-12">维保状态&nbsp;|&nbsp;已作废
							</view>
						</view>
						<view v-if="(item.status == 0 || item.status == 1) && item.responseNum > 0"
							class="tips3 ff-font-12 ff-margin-right-10">
							已有{{ item.responseNum }}家机构响应
						</view>
						<view v-if="item.rescissionStatus == 1"
							class="tips4 ff-color-fff ff-font-12 ff-margin-right-10">解约确认中
						</view>
						<view v-if="item.status == 3">
							<view v-if="item.maintenances[0].status != 9">
								<view v-if="item.maintenances[0].status == 5 && item.doneNumber > 0"
									class="tips3 ff-font-12">
									已完成{{ item.doneNumber }}次执业</view>
								<view v-else-if="item.maintenances[0].status == 7 && item.maintenceNum > 0"
									class="tips3 ff-font-12">
									正在进行第{{ item.maintenceNum }}次指派</view>
								<view v-else>
									<view v-if="item.maintenceNum > 0" class="tips3 ff-font-12">
										正在进行第{{ item.maintenceNum }}次执业</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ff-font-13 companyProject-content-box-time">
						更新于：{{ item.modified == null ? '/' : item.modified.substr(0, item.modified.length - 3) }}
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'companyProject',
		data() {
			return {
				companyList: [], // 单位列表数据
				// 单位列表数据请求的参数，项目状态:0.已发布 1.已响应 2，已确认 3.进行中 4.已结束 5.待审核（针对拆单）6.已解约
				params: {
					current: 1,
					size: 25,
					statuses: [],
					keyword: ''
				},
				noData: false // 没有更多了
			};
		},
		mounted() {
			this.getCompanyList(); // 获取单位的列表数据
		},
		computed: {
			tabberStyle() {
				return `top:${this.customBar}px;`;
			}
		},
		methods: {
			// onShow监听刷新
			showLoading() {
				this.params.current = 1;
				this.getCompanyList(); // 获取单位项目的数据列表
			},
			// 上拉加载
			pullLoading() {
				this.params.current++;
				this.getCompanyList(); // 获取的单位项目数据列表
			},
			// 下拉加载
			downLoading() {
				let that = this;
				that.params.current = 1;
				that.getCompanyList(); // 获取的单位项目数据列表
				setTimeout(() => {
					that.$refs.uToast.show({
						title: '刷新成功',
						type: 'success'
					});
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 搜索项目
			projectNameChange(e) {
				// console.log('当前搜索的值----', this.keyword)
				this.params.current = 1
				this.getCompanyList() // 获取单位的列表数据
			},
			// 点击项目列表进入详情
			companyClick(item) {
				// console.log('点击进入详情-----', item);
				// 项目状态: 0.已发布 1.已响应 3.进行中 4.已结束 5.待审核
				this.$emit('handleScroll') // 记录当前点击列表的数据位置
				if (item.status == 0 || item.status == 1 || item.status == 5) {
					this.$pageJump.navigateTo('/pages/maintenance/company/home/components/details/projectDetails?id=' +
						item
						.id);
					return;
				}
				if (item.status == 2 || item.status == 3 || item.status == 4 || item.status == 6) {
					this.$pageJump.navigateTo(
						'/pages/maintenance/company/home/components/details/projectMaintenanceRecord?id=' + item.id);
					return;
				}
			},
			// 获取单位的列表数据
			async getCompanyList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/project/user/page',
					data: this.params
				});
				// console.log('获取的单位列表数据------', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.companyList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = true;
						this.companyList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.companyList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.companyList = this.companyList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
		}
	};
</script>

<style lang="scss" scoped>
	.companyProject {
		&-search {
			position: fixed;
			left: 0;
			z-index: 9;
			width: 100%;
		}

		&-content {
			margin: 140rpx 30rpx 0 30rpx;

			&-box {
				padding: 30rpx;

				.ff-align-items-one {
					margin: 13.5rpx 0 11.5rpx;

					.tips1 {
						border: 2rpx solid #2b68ff;
						color: #2b68ff;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						margin-bottom: 8.5rpx;
					}

					.tips2 {
						border: 2rpx solid #f0403d;
						color: #f0403d;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						margin-bottom: 8.5rpx;
					}

					.tips3 {
						border: 2rpx solid #fef8e3;
						background-color: #fef8e3;
						color: #ef8732;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						margin-bottom: 8.5rpx;
					}

					.tips4 {
						border: 2rpx solid #ef312e;
						background-color: #ef312e;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						margin-bottom: 8.5rpx;
					}
				}

				&-time {
					background-color: #f5f5f5;
					color: #a8a7b5;
					padding: 22rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.rescindTips {
		background-color: #ffebeb;
		color: #ff0000;
	}
</style>